shlinkio / shlink-web-client

import React, { useState, useEffect } from 'react';

import { Button, Card, Collapse } from 'reactstrap';

import PropTypes from 'prop-types';

import qs from 'qs';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

import { faChevronDown as chevronDown } from '@fortawesome/free-solid-svg-icons';

import DateRangeRow from '../utils/DateRangeRow';

import Message from '../utils/Message';

import { formatDate } from '../utils/helpers/date';

import { useToggle } from '../utils/helpers/hooks';

import SortableBarGraph from './SortableBarGraph';

import { shortUrlVisitsType } from './reducers/shortUrlVisits';

import VisitsHeader from './VisitsHeader';

import GraphCard from './GraphCard';

import { shortUrlDetailType } from './reducers/shortUrlDetail';

import VisitsTable from './VisitsTable';

const propTypes = {

  match: PropTypes.shape({

    params: PropTypes.object,

  }),

  location: PropTypes.shape({

    search: PropTypes.string,

  }),

  getShortUrlVisits: PropTypes.func,

  shortUrlVisits: shortUrlVisitsType,

  getShortUrlDetail: PropTypes.func,

  shortUrlDetail: shortUrlDetailType,

  cancelGetShortUrlVisits: PropTypes.func,

  matchMedia: PropTypes.func,

};

const highlightedVisitsToStats = (highlightedVisits, prop) => highlightedVisits.reduce((acc, highlightedVisit) => {

  if (!acc[highlightedVisit[prop]]) {

    acc[highlightedVisit[prop]] = 0;

  }

  acc[highlightedVisit[prop]] += 1;

  return acc;

}, {});

const format = formatDate();

let memoizationId;

let timeWhenMounted;

const ShortUrlVisits = ({ processStatsFromVisits }, OpenMapModalBtn) => {

  const ShortUrlVisitsComp = ({

    match,

    location,

    shortUrlVisits,

    shortUrlDetail,

    getShortUrlVisits,

    getShortUrlDetail,

    cancelGetShortUrlVisits,

    matchMedia = window.matchMedia,

          <div className="col-lg-6">

            <SortableBarGraph

              title="Cities"

              stats={cities}

              highlightedStats={highlightedVisitsToStats(highlightedVisits, 'city')}

              extraHeaderContent={(activeCities) =>

                mapLocations.length > 0 &&

                <OpenMapModalBtn modalTitle="Cities" locations={mapLocations} activeCities={activeCities} />

              }

              sortingItems={{

                name: 'City name',

                amount: 'Visits amount',

              }}

            />

          </div>

        </div>

      );

    };

    return (

      <React.Fragment>

        <VisitsHeader shortUrlDetail={shortUrlDetail} shortUrlVisits={shortUrlVisits} />

        <section className="mt-4">

          <div className="row flex-md-row-reverse">

            <div className="col-lg-8 col-xl-6">

              <DateRangeRow

                startDate={startDate}

                endDate={endDate}

                onStartDateChange={setStartDate}

                onEndDateChange={setEndDate}

              />

            </div>

            <div className="col-lg-4 col-xl-6 mt-4 mt-lg-0">

              {showTableControls && (

                <Button

                  outline

                  block={isMobileDevice}

                  onClick={toggleTable}

                >

                  {showTable ? 'Hide' : 'Show'} table{' '}

                  <FontAwesomeIcon icon={chevronDown} rotation={showTable ? 180 : undefined} />

                </Button>

              )}

            </div>

          </div>

        </section>

        {showTableControls && (

          <Collapse

            isOpen={showTable}

            // Enable stickiness only when there's no CSS animation, to avoid weird rendering effects

            onEntered={setSticky}

            onExiting={unsetSticky}

          >

            <VisitsTable visits={visits} isSticky={tableIsSticky} onVisitsSelected={setHighlightedVisits} />

          </Collapse>

        )}

        <section>

          {renderVisitsContent()}

        </section>

      </React.Fragment>

    );

  };

  ShortUrlVisitsComp.propTypes = propTypes;

  return ShortUrlVisitsComp;

};

export default ShortUrlVisits;